<template>
<ul class="rightlist">
  <li class="list" v-for="item of letters" :key="item" @click="handclick"
  @touchstart="handstart"
  @touchmove="handmove"
  @touchend="handend"
  :ref="item">{{item}}</li>
</ul>
</template>

<script>
export default {
  name: 'rightlist',
  props: {
    city: Object
  },
  computed: {
    letters () {
      const letters = []
      for (let i in this.city) {
        letters.push(i)
      }
      return letters
    }
  },
  data () {
    return {
      touchstart: false
    }
  },
  methods: {
    handclick (e) {
      this.$emit('change', e.target.innerText)
    },
    handstart () {
      this.touchstart = true
    },
    handmove (e) {
      if (this.touchstart) {
        const starty = this.$refs['A'][0].offsetTop
        const touchy = e.touches[0].clientY - 73.6
        const index = Math.floor((touchy - starty) / 20.8)
        if (index >= 0 && index < this.letters.length) {
          this.$emit('change', this.letters[index])
        }
        console.log(index)
      }
    },
    handend () {
      this.touchstart = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.rightlist
  display: flex
  flex-direction: column
  justify-content: center
  position: absolute
  right: 0.2rem
  list-style:none
  color: #00bcd4
  margin: 0
  min-height: 31.25rem
  padding-top: 20%
</style>
